<template>
  <div id="confirm_order">
    <Header></Header>
    <div class="mui-content" style="padding-top: 50px !important;">
      <div class="address">

        <div class="send_type">
          <span>选择配送方式：</span>
         
          <span :class="send_type_index==k?'btn bg_blue':'btn'" v-for="(i,k) in send_type" :key="k" @click="change_send_type_index(k)">{{i.name}}</span>
       
        </div>
        <div  style="font-size: 0.6rem;line-height: 2rem;height: 2rem;"
              v-show="address_list.length<1"
              @tap="open_add_address_view(true)"
        >请先添加收货地址</div>
        <div class="address_info" @tap="open_select_address(true)">

          <div class="title" >
            <span class="name">{{used_address.name}} : </span>{{used_address.phone}}
          </div>
          <div class="info">
            <i></i>
            <span>{{used_address.province}} {{used_address.city}} {{used_address.area}} {{used_address.address}}    </span>
            <b></b>
          </div>

        </div>
      </div>

      <div class="order_info">
        <div box-name="shop_item" >
        <div class="title">社区商城</div>

        <div class="goods_list">
          <div class="goods_item" v-for="(i,k) in $store.state.confirm.buy_car.goods_list" :key="k">
            <div class="img">
              <img :src="i.pic" alt="">
            </div>
            <div class="info">
              <div class="goods_title">{{i.name}}</div>
              <div class="canshu">
                <span class="fl">规格：{{i.rule}}</span>
                <span class="fr">×{{i.num}}</span>
              </div>
              <span class="price">￥{{i.min_price.toFixed(2)}}</span>
            </div>
          </div>
        </div>
        </div>
        <div class="order_msg">
          <div>
            <span class="title">可用优惠</span>
            <span class="right" >优惠券
                        <i class="mui-icon mui-icon-arrowdown"></i>
                    </span>
          </div>
        </div>
        <div class="order_msg">
          <div>
            <span class="title">买家留言</span>
            <input type="text"  placeholder="选填" v-model="user_msg" style="margin-left: 10px;">
          </div>
        </div>
        <div class="order_msg">
          <div class="bottom_info">
            <span class="title">共 {{$store.state.confirm.buy_car.count_num}} 件商品</span>
            <span class="right">合计:
                        <span class="price">￥{{$store.state.confirm.buy_car.count_price}}</span>
							</span>
          </div>
        </div>
        <div class="submit_order" @tap="open_confirm_pay(true)">
          <button class="">提交订单</button>
        </div>
        <transition name="slide-fade">
          <div class="msg_box_box" v-show="show_confirm_pay">
            <div class="msg_box_mask" @tap="open_confirm_pay(false)">
            </div>
            <div class="msg_box">
              <div class="top_title">确认收获地址</div>
              <div class="infos">
                <div class="ads" >
                  <span class="name">地址：</span>
                  <span class="text"> {{used_address.province}} {{used_address.city}} {{used_address.area}} {{used_address.address}}   </span>
                </div>
                <div class="ads pays" >
                  <span class="pay fl">支付方式：</span>
                  <span class="pay_type fr" style="padding-right: 0.4rem">微信支付 </span>
                </div>
              </div>
              <div class="submit_order to_pay" @tap="to_pay_order">
                <button class="" >立即付款</button>
              </div>
            </div>
          </div>
        </transition>

        <transition name="slide-fade">

          <!--选择地址-->

          <div class="select_address" v-show="show_address_select_box">
            <header class="mui-bar mui-bar-nav" style="top: 0;">
              <a class=" mui-icon  mui-pull-left arr_left" @tap="open_select_address(false)">

              </a>

              <h1 class="mui-title" >选择地址</h1>

            </header>
            <div class="select_address_item" :key="k"  v-for="(i,k) in address_list" @tap="select_this_address(k)">
              <div class="selected_incon" v-show="k==used_address_index"><img src="../../assets/images/car_07.png" alt=""></div>
              <div class="select_address_item_info">
                <div>{{i.name}} {{i.phone}} <span :class="i.default==1?'is_default':'' ">默认</span></div>
                <div>{{i.province}}{{i.city}}{{i.area}} {{i.address}}</div>
              </div>
            </div>
            <div class="select_add_acitydiv"></div>
            <div class="select_add_acity" @tap="open_add_address_view(true)">
              添加地址
            </div>
          </div>

        </transition>
        <transition name="slide-fade">
          <div class="add_address_view"  v-if="$store.state.address.show_address_add">
            <header class="mui-bar mui-bar-nav" style="top: 0;z-index: 1001">
              <a class=" mui-icon  mui-pull-left arr_left" @tap="open_add_address_view(false)">

              </a>

              <h1 class="mui-title"  >新增地址</h1>

            </header>
            <AddAddress></AddAddress>
          </div>

        </transition>

      </div>
    </div>
  </div>

</template>

<script>
  import Header from '../../components/Header'
  import address_ajax from '../../ajax/address_ajax';
  import AddAddress from '../my/AddAddress'
  import goods_ajax from "../../ajax/goods_ajax";
  import h5_plus from '../../tools/h5_plus'
  export default {
    data(){
      return {
        address_list:[],
        show_confirm_pay:false,
        used_address:'',
        used_address_index:'',
        show_address_select_box:false,
        show_add_address_view:false,
        user_msg:'',
        discount:[],
        distribution_pay:1, //0-->自提 1-->配送,
          send_type_index:0,
          send_type:[
            {
              name:'配送上门',
              value:1
            },
            {
              name:'自提',
              value:0
            }
          ]
      }
    },
    components:{
      Header,
      AddAddress
    },
    computed:{
      count_price(){
        let price = this.$store.state.confirm.order_info.buy_price;
        let num = this.$store.state.confirm.order_info.buy_num;
        let count = parseFloat(price)*100*parseInt(num);
        return (count/100).toFixed(2);
      },
      address_state(){
        return this.$store.state.address.address_change_num
      }
    },
    watch:{
      address_state(){
        this.address_init()
      }
    },
    methods:{
      change_send_type_index(k){
          this.send_type_index = k;
          this.distribution_pay = this.send_type[k].value;
        },
      address_init(){
        address_ajax.get_address_list({
          uid:this.$store.state.account.user_info.uid
        },res=>{
          if(res.length<1){
            mui.toast("请添加收货地址");
            return;
          }
          for (let i =0;i<res.length;i++) {
            if(res[i].default==1){
              res[i].used = true;
              this.used_address = res[i]
            }
          }
          this.address_list = res;
          console.log(res)
        })
      },
      open_confirm_pay(tf){
        this.show_confirm_pay=tf
      },
      open_select_address(tf){
        this.show_address_select_box = tf
      },
      select_this_address(k){
        this.used_address_index =k;

        this.used_address = this.address_list[k];
        this.open_select_address(false)
      },
      open_add_address_view(tf){
        this.$store.commit("open_address_add", tf)
        // this.show_add_address_view = tf
      },
      to_pay_order(){
        // 先生成订单
        let cartids = "";
        var goods_list = this.$store.state.confirm.buy_car.goods_list;
        for(let i=0;i<goods_list.length;i++){
          cartids += goods_list[i].cartid+",";
        }
        cartids = cartids.substring(0,cartids.length-1)


        goods_ajax.submit_order_car({
          cartids:cartids,
          distribution_pay:'配送方式，暂无',
          discount:'',
          user_msg:this.user_msg,
          uid:this.$store.state.account.user_info.uid,
          distribution_pay:this.distribution_pay
        },order_num=>{
          console.log(order_num);
          if(order_num){
            // 发起支付
            h5_plus.pay_fun(order_num,res=>{
              this.$router.push("/")
              this.$store.commit("open_pay_succ_view",true)
            })
          }
        })
      }
    },
    created(){
      this.$store.commit("change_header", {
        header_text: '确认订单',
        header_right_func: false,
        header_right_html: "<span></span>",
        header_back_btn: true
      });
      this.address_init()
      console.log(this.$store.state.goods.buy_type)

    },


  }
</script>

<style scoped>

  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .msg_box_box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .msg_box_mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .add_address_view{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  html,
  body,
  .mui-content {
    background-color: #ffffff;
  }
  .ptsp_top_stats {
    height: 20px;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }
  .mui-action-back img {
    width: 100%;
  }
  .mui-bar-nav {
    top: 20px;
  }
  .mui-content {
    padding-bottom: 100px;
    padding-top: 64px !important;
  }
  .arr_left {
    background-image: url(../../assets/images/ptsp/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .mui-title {
    font-size: 0.768rem;
  }
  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }
  .address {
    padding: 0 0.64rem;
    font-size: 0.512rem;
    color: #353535;
    background-color: #ffffff;
  }
  .address .send_type {
    height: 1.6rem;
    line-height: 1.6rem;
    width: 100%;
    border-bottom: 1px solid #ececec;
  }
  .address .send_type span {
    float: left;
  }
  .address .send_type .btn {
    height: 0.9813rem;
    line-height: 0.9813rem;
    margin-top: 0.2987rem;
    border: 1px solid #888888;
    padding: 0 0.7253rem;
    border-radius: 5px;
    margin-right: 0.64rem;
    box-sizing: border-box;
  }
  .address .send_type .bg_blue {
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
    color: #ffffff;
    border: none;
  }
  .address .address_info {
    min-height: 3.584rem;
  }
  .address .address_info .title {
    height: 1.1947rem;
    line-height: 1.1947rem;
    font-size: 0.5973rem;
  }
  .address .address_info .info {
    padding-left: 1.664rem;
    font-size: 0.4693rem;
    color: #888888;
    line-height: 0.6827rem;
    overflow: hidden;
  }
  .address .address_info .info i {
    margin-top: 0.064rem;
    float: left;
    width: 0.4053rem;
    height: 0.4907rem;
    background-image: url(../../assets/images/dingwei_03.png);
    background-size: 100% 100%;
  }
  .address .address_info .info span {
    float: left;
    width: 11.52rem;
    margin-left: 0.2133rem;
    margin-right: 0.2133rem;
  }
  .address .address_info .info b {
    float: left;
    width: 0.2773rem;
    height: 0.512rem;
    margin-top: 0.064rem;
    background-image: url(../../assets/images/car_03.png);
    background-size: 100% 100%;
  }
  .order_info .title {
    padding: 0 0.64rem;
    height: 1.4507rem;
    line-height: 1.4507rem;
    font-size: 0.5973rem;
    color: #353535;
    background-color: #ffffff;
  }
  .order_info .goods_list {
    background-color: #fafafa;
    padding-bottom: 0.5973rem;
  }
  .order_info .goods_list .goods_item {
    position: relative;
    padding: 0 0.64rem;
    padding-top: 0.5973rem;
    height: 4.0107rem;
  }
  .order_info .goods_list .goods_item .img {
    float: left;
    width: 3.4133rem;
    height: 3.4133rem;
    background-color: #ccc;
  }
  .order_info .goods_list .goods_item .img img {
    width: 100%;
    height: 100%;
  }
  .order_info .goods_list .goods_item .info {
    float: left;
    width: 11.3067rem;
    padding-left: 0.5973rem;
    height: 100%;
  }
  .order_info .goods_list .goods_item .info .goods_title {
    font-size: 0.5973rem;
    line-height: 1.1093rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order_info .goods_list .goods_item .info .canshu {
    font-size: 0.4693rem;
    color: #888888;
    overflow: hidden;
  }
  .order_info .goods_list .goods_item .info .price {
    float: right;
    font-size: 0.5547rem;
    color: #ff0000;
  }
  .order_info .order_msg {
    width: 100%;
    height: 1.4507rem;
    padding: 0 0.64rem;
    background-color: #ffffff;
  }
  .order_info .order_msg div {
    height: 100%;
    border-bottom: 1px solid #ececec;
  }
  .order_info .order_msg div .title {
    padding: 0;
    float: left;
    height: 1.408rem;
  }
  .order_info .order_msg div .right {
    margin-top: 0.2773rem;
    float: right;
    font-size: 0.4693rem;
  }
  .order_info .order_msg div .right .mui-icon {
    font-size: 0.4693rem;
  }
  .order_info .order_msg div input {
    float: left;
    width: 11.52rem;
    border: none;
    height: 1.408rem;
    line-height: 1.4507rem;
    font-size: 0.4693rem;
    margin: 0;
    padding: 0;
  }
  .order_info .order_msg .bottom_info {
    border: none;
  }
  .order_info .order_msg .bottom_info .title,
  .order_info .order_msg .bottom_info .right {
    font-size: 0.4693rem;
  }
  .order_info .order_msg .bottom_info .title .price,
  .order_info .order_msg .bottom_info .right .price {
    color: red;
    font-size: 0.8107rem;
  }
  .order_info .submit_order {
    padding: 0 0.64rem;
    margin-top: 3.7333rem;
  }
  .order_info .submit_order button {
    width: 100%;
    height: 2.0267rem;
    color: #ffffff;
    font-size: 0.6827rem;
    border-radius: 5px;
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
  }
  .msg_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
    height: 12.0747rem;
    z-index: 1000;
  }
  .msg_box .top_title {
    height: 1.6213rem;
    width: 100%;
    line-height: 1.6213rem;

    border-bottom: 1px solid #e5e5e5;
    text-align: center;
  }
  .msg_box .infos {
    padding-top: 1.4933rem;
    padding-left: 0.64rem;
    padding-right: 0.64rem;
    font-size: 0.5973rem;
  }
  .msg_box .infos .ads {
    padding-bottom: 0.2133rem;
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
  }
  .msg_box .infos .ads .name,
  .msg_box .infos .ads .text {
    float: left;
  }
  .msg_box .infos .ads .name {
    width: 2.1333rem;
  }
  .msg_box .infos .ads .text {
    width: 11.3067rem;
  }
  .msg_box .infos .ads .mui-icon-arrowright {
    margin-top: 10px;
    width: 0.768rem;
    height: 0.768rem;
    font-size: 0.768rem;
  }
  .msg_box .infos .pays {
    height: 1.4933rem;
    line-height: 1.4933rem;
  }
  .msg_box .infos .pays .mui-icon-arrowright {
    margin-top: 0.3627rem;
  }
  .msg_box .to_pay {
    margin-top: 2.3467rem;
  }
  .mui-poppicker {
    z-index: 1005 !important;
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s ease;
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }
  .select_address {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #f1f1f1;
    width: 100%;
    height: 100%;
    padding-top: 54px;
    padding-left: 0.5973rem;
    padding-right: 0.5973rem;
    font-size: 0.5973rem;
  }
  .select_address .select_address_item {
    background-color: #fff;
    padding: 0.4267rem;
    margin-bottom: 0.4267rem;
    overflow: hidden;
  }
  .back_box {
    position: absolute;
    width: 2.1333rem;
    height: 2.1333rem;
    background-color: transparent;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .is_default {
    color: #fff;
    background-color: #ff0000;
    border-radius: 3px;
    padding: 0px 5px;/*line-height: 20px;*/
    display: inline-block;height: 18px;
  }
  .selected_incon {
    float: left;
    width: 0.8533rem;
    height: 0.8533rem;
    margin-right: 0.4267rem;
    margin-top: 0.4267rem;
  }
  .selected_incon img {
    width: 100%;
    height: 100%;
  }
  .select_address_item_info {
    float: left;
    width: 12.3733rem;
  }
  .select_add_acitydiv {
    width: 100%;
    height: 2rem;
  }

  .select_add_acity {
    width: 100%;
    height: 2rem;
    position: absolute;
    left: 0;
    bottom: 0px;
    text-align: center;
    line-height: 2rem;
    font-size: 18px;
    background: #F8F8F8;
  }
</style>
